<template>
    <div class="container">
        图表插件显示界面
        <button @click="refresh">刷新</button>
        <button @click="expand">放大</button>
        <button @click="shrink">缩小</button>

        <!-- <button @click="hideOrShow">测试自定义隐藏</button> -->
        <a-row>
            <a-col :span="19">
                <!-- 上层图 -->
                <DoubleVolumeGraph :data="data1" :field_info="field_info1" :line_colors="[y_label_color['price'], y_label_color['ranking']]" ref="childGraph1"/>
                <!-- 下层图 -->
                <DoubleVolumeGraph :data="data2" :field_info="field_info2" :line_colors="[y_label_color['star'], y_label_color['review']]" ref="childGraph2"/>
            </a-col>
            <a-col :span="3" class="config-option">
                <h3 class="graph-title">历史趋势</h3>
                <!-- 按钮列表 -->
                <div class="btn-container">
                    <a-tooltip placement="top">
                        <template slot="title">
                        <span>虽然不知道做啥功能，但先留着</span>
                        </template>
                        <a-button type="link" shape="circle" icon="plus-circle" />
                    </a-tooltip>
                    <a-tooltip placement="top">
                        <template slot="title">
                        <span>虽然不知道做啥功能，但先留着</span>
                        </template>
                        <a-button type="link" shape="circle" icon="retweet" />
                    </a-tooltip>
                    <a-tooltip placement="top">
                        <template slot="title">
                        <span>刷新数据</span>
                        </template>
                        <a-button type="link" shape="circle" icon="redo" @click="loadData"/>
                    </a-tooltip>
                    <a-tooltip placement="top">
                        <template slot="title">
                        <span>虽然不知道做啥功能，但先留着</span>
                        </template>
                        <a-button type="link" shape="circle" icon="swap" />
                    </a-tooltip>
                    <a-tooltip placement="top">
                        <template slot="title">
                        <span>图片导出(未做)</span>
                        </template>
                        <a-button type="link" shape="circle" icon="download" />
                    </a-tooltip>  
                </div>

                <!-- 字段列表 -->
                <div class="field-container">
                    <span class="field-line click-btn" v-for="(value, idx) in y_label" :key="idx" @click="handleClikeLine(value)">
                        <a-icon type="line-chart" :style="{color: y_label_color[value]}" /> &nbsp; {{value}}
                    </span>
                </div>

                <!-- 时间段 -->
                <div class="time-span">
                    <a-list :data-source="time_span">
                    <a-list-item slot="renderItem" slot-scope="item">
                        <a-button type="link" @click="loadSpanData(item.preDay)">
                        {{item.value}}
                        </a-button>
                    </a-list-item>
                    <div slot="header">
                        <h1 style="text-align:left;font-weight:bold;font-size:16px;">范围:</h1>
                    </div>
                    </a-list>
                </div>
            </a-col>
        </a-row>
    </div>
</template>

<script>
import { getItemList } from "@/api/item_detail/item_detail"
import DoubleVolumeGraph from "@/components/antv/double-volume-graph.vue"
import {formatDate, getPreviousDayTime} from "@/utils/time_utils"

export default {
    components: { DoubleVolumeGraph },
    data(){
        return {
            data: [],  // 原始总数据,
            data1:[],  // 上层图数据
            data2:[],  // 下层图数据，两个也作为缓存，用着放大缩小
            field_info1:{
                'x_axis': 'updateTime',
                'y_value_left': 'price',
                'y_value_right': 'ranking', 
            }, // 上层图字段到轴的映射
            field_info2:{
                'x_axis': 'updateTime',
                'y_value_left': 'star',
                'y_value_right': 'review',
            }, // 下层图字段到层的映射
            time_span:[
                {
                    value: '近7天',
                    preDay: 7,  // 今天往后推7天
                },
                {
                    value: '近一个月',
                    preDay: 30,  // 
                },
                {
                    value: '近3个月',
                    preDay: 90,  // 
                },
                {
                    value: '近6个月',
                    preDay: 180,  // 
                },
                {
                    value: '全部',
                    preDay: null,  // 
                }
            ], // 时间段
            // 图表显示范围, 用于图表的缩放
            start_idx: 0,
            end_idx: -1,
            // y轴标签
            y_label: [],
            y_label_color: {}
        }
    },
    created(){
        //配置样式信息
        this.y_label = [
            this.field_info1['y_value_left'],
            this.field_info1['y_value_right'],
            this.field_info2['y_value_left'],
            this.field_info2['y_value_right'],
        ]
        this.y_label_color = {
            'price': '#5B8FF9', 
            'ranking': '#5AD8A6',
            'star': '#5B00F9', 
            'review': '#ec1010',
        }
    },
    methods:{
        // 筛选出价格，排名字段
        getPriceRank(item){
            return {
                'updateTime': item.updateTime,
                'ranking': item.ranking,
                'price': item.price
            }
        },
        getStarReview(item){
            return {
                'updateTime': item.updateTime,
                'star': item.star,
                'review': item.review
            }
        },
        filterDateTime(item){
            // TODO,根据价格筛选
            return true;
        },
        updateGraph(start, end){
            var t_data = this.data.filter(this.filterDateTime)
            // 根据时间跨度切分数组中的元素
            this.data1 = t_data.map(this.getPriceRank)
            this.data2 = t_data.map(this.getStarReview) 
        },
        // 处理空白数据
        fillBlank(item){
            // console.log(item)
            for(let x in item){
                if(item[x] == undefined || item[x] == null){
                    item[x] = 0;
                }
            }
            return item
        },

        // 刷新图表组件
        refresh(){
            this.$refs.childGraph1.update()
            this.$refs.childGraph2.update()

        },
        // 放大
        expand(){
            var t_data = this.data.filter(this.filterDateTime)
            
            // 保证处于有效数据范围内进行缩小
            if(this.end_idx == -1){
                this.end_idx = this.data.length
            }
            this.start_idx -= 1;
            if(this.start_idx < 0)this.start_idx += 1
            if(this.end_idx < this.data.length)this.end_idx += 1
            this.data1 = t_data.map(this.getPriceRank).slice(this.start_idx, this.end_idx)
            this.data2 = t_data.map(this.getStarReview).slice(this.start_idx, this.end_idx)
            this.refresh()
        },
        // 缩小
        shrink(){
            var t_data = this.data.filter(this.filterDateTime)
            
            // 保证处于有效数据范围内进行缩小
            if(this.end_idx == -1){
                this.end_idx = this.data.length
            }
            this.start_idx += 1;
            if(this.start_idx >= this.end_idx - 2)this.start_idx -= 1
            if(this.end_idx > this.start_idx + 3)this.end_idx -= 1
            this.data1 = t_data.map(this.getPriceRank).slice(this.start_idx, this.end_idx)
            this.data2 = t_data.map(this.getStarReview).slice(this.start_idx, this.end_idx)
            this.refresh()
        },
        handleClikeLine(key){
            console.log(key)
        },
        hideOrShow(){
            this.$refs.childGraph1.clickLegend('ranking')
        },
        loadData(param){
            if(param == undefined || param == null)param = {}
            if(param.id == undefined || param.id == null){
                param.id = this.$route.params.id;
            }
            getItemList(param).then(
                (data)=>{
            
                this.data = data.data
                this.data = this.data.map(this.fillBlank)
            
                // 更新数据并刷新图表
                this.updateGraph()
                this.refresh()
            },
                (err)=>{
                console.log("error: ", err)
            })
        },
        loadSpanData(preDay){
            var res = formatDate(getPreviousDayTime(new Date(), preDay))
            console.log("往前", res)
            if(res == null){
                this.loadData()
            }else{
                this.loadData({startTime: res})
            }
            
        }
    },
    mounted(){
        this.loadData()
        // console.log("父组件mounted完成")
    },
}
</script>

<style scoped lang="less">
.config-option{
    align-content: center;
    text-align: center;
    padding-top: 5%;
}

.btn-container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 20%;
    padding-right: 20%;
}

.field-container{
    display: flex;
    flex-direction: column;
    text-align: left;
}

.field-line{
    line-height: 30px;
    font-size: 16px;
}

.click-btn:hover{
    cursor: pointer;
    color: grey;
    // font-size: 18px;
    font-weight: bold;
}

.graph-title{
    font-weight: bold;
    font-size: 20px;
}
</style>